<template>
  <div class="wrap-scroll-sys-msg">
    <div class="t_news">
      <b>
        <img src="static/img/icon_tongzhi.png">
      </b>
      <ul class="news_li">
        <li v-for="drivce in drivces" :key="drivce.deviceId">
            <a href="javascript::void(0)">设备：{{drivce.deviceId}}于{{drivce.warningTime}} 发出“{{drivce.warningName}}”</a>
        </li>
      </ul>
      <ul class="swap"></ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "sysMsgScroll",
  data() {
    return {
      drivces: [
        {
          deviceId: "-",
          warningTime: "-",
          warningName:"-",
        },
      ]
    };
  },
  created: function() {
    //创建实例
  },
  mounted: function() {
    this.getData()
    setInterval(() => {
      
      $(".news_li").css({"top": 0});
      return false;
      $(".swap").html("").css({"top": 0});
      this.getData();
    }, 60000);
  },
  methods: {
      getData(){
          const userInfo = JSON.parse(localStorage.getItem("userInfo"));
          $.ajax({
              url: this.global.warningInfoList + "?appKey=" + userInfo.appKey,  //接口地址，配置在全局 golbal.vue文件
              dataType: "json",
              type: "GET",
              context: this,
              headers: {
                  "Content-Type": "application/json",
              },
              data:{
                limit:20
              },
              success: function(res) {
                  if(res.success == true && res.code == 200){
                    console.log(res.data);
                    this.drivces = res.data;
                    // this.sysMsgScroll();
                    setTimeout(() => {
                      this.sysMsgScroll();
                    }, 100);
                  }
                  else{
                      console.log("获取图表信息失败");
                  }
              },
              complete: function(res) {
                  console.log("完成");
              },
              error: function(res) {
                  console.log("获取图标信息失败");
              }
          });

      },

    sysMsgScroll() {
      var stcrollToHeight = 22;
      var x = $(".news_li");
      var y = $(".swap");
      var h = $(".news_li li").length * stcrollToHeight; //22为每个li的高度
      var t = parseInt(x.css("top"));
      function b() {
        //设置滚动高度
        var t = parseInt(x.css("top"));
        y.css("top", stcrollToHeight + "px");
        x.animate({ top: t - stcrollToHeight + "px" }, "slow");
        if (Math.abs(t) == h - stcrollToHeight) {
          //19为每个li的高度
          y.animate({ top: "0px" }, "slow");
          var z = x;
          x = y;
          y = z;
        }
        setTimeout(b, 3000); //滚动间隔时间 现在是3秒
      }
      $(".swap").html($(".news_li").html());
      setTimeout(b, 3000); //滚动间隔时间 现在是3秒
    }
  }
};
</script>

<style scoped>
</style>